<template>
	<div class="squareGrid">
		<div class="squareGrid-item" v-for="(item, index) in GridList" :key="item">
			<span>{{ item.title }}</span>
			<div>
				<span>{{ item.number }}</span>
				<span>个</span>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';

let GridList = ref([
	{
		title: '党员总数',
		number: 834
	},
	{
		title: '正式党员',
		number: 200
	},
	{
		title: '预备党员',
		number: 210
	},
	{
		title: '流动党员',
		number: 204
	},
	{
		title: '发展党员',
		number: 220
	}
]);

// import { reactive } from 'vue';

// const gridList = reactive();
</script>

<style scoped lang="scss">
.squareGrid {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr; //有几列
	grid-template-rows: repeat(2, 1fr); //有几行
	grid-gap: 10px;

	overflow: hidden;
	.squareGrid-item {
		background: rgba(255, 255, 255, 0.1);
		padding: 10px;
		span {
			color: #fff6d1;
		}
		& > span:nth-child(1) {
			display: inline-block;
			width: 100%;
			font-size: 16px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		div {
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			span:nth-child(1) {
				font-size: 22px;
				margin-right: 5px;
			}
		}
	}
}
</style>
